import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// import "./plugins/element.js";  引入element-ui组件 这里使用CDN资源引入，见index.html <head>
import axios from "axios";
import TreeTable from "vue-table-with-tree-grid";
import NProgress from "nprogress"; // 引入展示/隐藏页面加载进度条

//  导入全局样式表
import "./assets/css/global.css";
import "./assets/iconfont/iconfont.css";
import "./assets/css/base.css";

import VueQuillEditor from "vue-quill-editor"; // 导入富文本编辑器
// 富文本编辑器对应的样式  体积很大，这里使用CDN资源引入的方式来进行引用，见public/index.html <header>中
// import "quill/dist/quill.core.css";
// import "quill/dist/quill.snow.css";
// import "quill/dist/quill.bubble.css";

// Nprogress包对应的CSS  体积很大，这里使用CDN资源引入的方式来进行引用，见public/index.html <header>中
// import "nprogress/nprogress.css";

Vue.use(VueQuillEditor /* { default global options } */); // 将富文本编辑器注册为全局可用的组件
Vue.config.productionTip = false;

axios.defaults.baseURL = "https://lianghj.top:8888/api/private/v1/"; // 配置请求基准地址

// 网络请求过滤器
axios.interceptors.request.use((config) => {
  // config请求对象
  // 发起请求前展示进度条
  NProgress.start();
  //  给请求头对象中添加Authorization属性并赋值token的值 在控制台网络请求中的请求头中可查看到Authorization
  config.headers.Authorization = window.sessionStorage.getItem("token");
  // console.log(config); // 包含headers属性 第一次登陆时，由于token还在生成期间，并不能立即赋值给Authorization，所以第一次其值为null
  return config;
});
axios.interceptors.response.use((config) => {
  NProgress.done();
  return config;
});

Vue.prototype.$http = axios;
Vue.component("tree-table", TreeTable);

Vue.filter("formatDate", (date) => {
  // 定义一个全局的过滤器 在模板引擎中在要过滤的变量加上|再写上过滤器名称即可调用该过滤器
  const newDate = new Date(date); // 转化为标准时间格式

  const year = newDate.getFullYear(); // 获得年
  const month = newDate.getMonth().toString().padStart(2, 0); // 获得月 padStart判断字符串是否满足参数一的长度，不满足在字符串开始加上一个参数二
  const day = newDate.getDay().toString().padStart(2, 0); // 获得日

  const hour = newDate.getHours().toString().padStart(2, 0);
  const min = newDate.getMinutes().toString().padStart(2, 0);
  const sec = newDate.getSeconds().toString().padStart(2, 0);
  return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
});

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");
